@use '../../common.scss';

.visualizer_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2em;

  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  align-items: flex-end;

  transition: background common.$short-duration;
  color: common.$white;

  & > * {
    color: common.$white;
    transition: opacity common.$short-duration ease-in !important;
    opacity: 0;
    margin: 0;

    &:not(:last-child) {
      margin-right: 1em;
    }
  }

  button {
    margin: 0 !important;
    &:last-child{
      margin-left: 1em !important;
    }
  }

  p {
    line-height: 2.71428571em;
  }
  &.hover {
    background: rgba(common.$background3, 0.75);
    & > * {
      opacity: 1;
    }
  }
}
